<template>
    <h3>setup概述</h3>
    <div class="person">
      <h2>name:{{ name }}</h2>
      <h2>age:{{ age }}</h2>
      <button @click="showTel" >联系方式</button>
      <button @click="changeAge" >改年龄</button>
    </div>
  
  </template>
  
  <script lang='ts'>
  export default{
      name:'person3',
      //创建之前
      beforeCreate(){
        console.log("---beforeCreate---")
      },
      //组合式
      setup(){
        console.log("---setup---")
        //数据，原来是写在data中的，
        let name="zhangsan" //注意，此时的name不是响应式的
        let age = 19 //注意，此时的age不是响应式的
        let tel = '13900000002'
        //注意、注意、这里不能读取上面data中变量

        //方法
        function showTel(){
            alert(tel)
        }
        function changeAge(){
            console.log("---changeAge---")
            //因为不是响应式，所以，虽然这里age变了，但是页面上不会变化
            age+=1
        }

        //需要返回，才可以引用
        //第一种返回对象，key：value,然后上面用key
        //return {a:name,b:age}

        //第二种，简写,当key和value变量一样，直接忽略key
        return {name,age, changeAge, showTel}
      }
  }
  </script>
  <style scoped>
  .person{
      background-color: skyblue;
      border-radius: 3px;
      padding: 5px;
      margin: 2px 5px 2px 5px;
  }
  </style>